<template>
  <div class="content">
    <TitleBox></TitleBox>
    <div class="apply-box">
      <div class="apply-main">
        <ul>
          <li class="jieshao">
            <textarea name="pro-self" id="introduce" cols="30" rows="8" placeholder="在这里输入你的问题"></textarea>
            <span>35/50</span>
            <div class="file-lists">
              <img src="../assets/img/tx-a001.jpg">
            </div>
            <div class="file-area"></div>
          </li>
          <li>
            <h3>问题分类</h3>
            <ul class="list-icon flex-box">
              <li v-for="(item,index) in listsClassify" :key="index"><router-link to="/">{{item}}</router-link></li>
            </ul>
          </li>
          <li>
            <h3>悬赏金额</h3>
            <input type="text" id="job" placeholder="手动输入悬赏金额">
            <ul class="list-icon flex-box">
              <li v-for="(item,index) in listsMoney" :key="index"><router-link to="/">{{item}}元</router-link></li>
            </ul>
          </li>
          <li>
            <h3>匿名提问</h3>
            <input type="checkbox" name="category"/>
          </li>
        </ul>
        <a href="#" class="submit flex-box active">支付1元，发布提问</a>
        <div class="check-more-answer"><a href="#">想知道更专业的答案？请选择专家提问</a></div> 
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import TitleBox from '../components/TitleBox.vue'
export default {
  name: 'home',
  data() {
    return {
      listsClassify: ['基因检测', '孕期', '用药', '常见疾病', '疫苗', '辅食', '育儿'],
      listsMoney: ['1', '5', '10', '20', '30', '40', '50']
    }
  },
  components: {
    TitleBox
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {}
}
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  padding-bottom: 50px;
  .apply-box {
    max-width: 750px;
    margin: 0 auto;
    background: #fff;
    padding-top: 10px;
    .apply-main {
      width: 100%;
      padding-left: r(15);
      padding-right: r(15);
      box-sizing: border-box;
      padding-bottom: r(36);
      ul {
        width: 100%;
        overflow: hidden;
        li {
          width: 100%;
          float: left;
          padding-bottom: r(14);
          ul.list-icon {
            flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            li {
              float: left;
              border: 1px solid #ccc;
              border-radius: 40px;
              width: 30%;
              margin-top: r(6);
              margin-bottom: r(6);
              font-size: r(14);
              text-align: center;
              padding-bottom: 0;
              a {
                padding-top: r(10);
                padding-bottom: r(10);
                color: #666666;
                width: 100%;
                display: block;
              }
            }
          }
          &:last-child,
          &.jieshao {
            border-bottom: none;
          }
          &.jieshao {
            position: relative;
            span {
              float: right;
              font-size: r(11);
              color: #999999;
              position: relative;
              top: -32px;
              right: 8px;
            }
          }
          h3 {
            font-size: r(14);
            line-height: r(18);
            color: #333333;
            margin-top: r(20);
            margin-bottom: r(20);
            padding-left: r(10);
            position: relative;
            &::before {
              width: 3px;
              height: r(16);
              background: #6dbbfe;
              content: '';
              display: block;
              position: absolute;
              top: 1px;
              left: 0;
              border-radius: 4px;
            }
          }
          input {
            width: 100%;
            height: auto;
            margin-bottom: 18px;
            line-height: r(42);
            border: none;
            background: none;
            font-size: r(16);
            color: #666666;
            text-align: center;
            border-bottom: 1px solid #dedede;
            padding: 0;
          }
          input::-webkit-input-placeholder,
          textarea::-webkit-input-placeholder {
            color: #cccccc;
          }
          input::-moz-placeholder,
          textarea::-moz-placeholder {
            // Firefox19+
            color: #cccccc;
          }
          textarea {
            width: 100%;
            box-sizing: border-box;
            border-radius: r(6);
            font-size: r(16);
            border: none;
            padding: r(8);
            color: #666666;
            outline: none;
            background: #fafafa;
            margin-bottom: 12px;
          }
          input[type='checkbox'] {
            appearance: none;
            position: relative;
            background: #fff;
            border: 1px solid #ccc;
            width: 56px;
            height: 28px;
            border-radius: 20px;
            transition: all ease-in-out 300ms;
            outline: none;
            cursor: pointer;
            float: right;
            margin-top: -42px;
            transform: scale3d(0.8, 0.8, 0.8);
          }
          input[type='checkbox']:before {
            background: none;
          }
          input[type='checkbox']:after {
            content: '';
            position: absolute;
            left: 2px;
            top: 2px;
            display: block;
            width: 22px;
            height: 22px;
            background: #ccc;
            color: #fff;
            text-align: center;
            line-height: 22px;
            transition: all ease-in-out 300ms;
            border-radius: 20px;
            font-size: 12px;
          }
          input[type='checkbox']:checked {
            background: #00bfff;
            border: 1px solid #00bfff;
          }
          input[type='checkbox']:checked:after {
            content: '';
            left: 30px;
            background: #fff;
            color: #00bfff;
          }
          input[type='checkbox']:checked:before {
            background: none;
          }
          .file-area {
            width: r(100);
            height: r(100);
            background: #f2f2f2;
            border-radius: r(4);
            float: left;
            position: relative;
            &::before,
            &::after {
              position: absolute;
              content: '';
              height: 1px;
              width: r(40);
              top: 50%;
              left: r(30);
              background: #d8d8d8;
            }
            &::after {
              transform: rotateZ(90deg);
            }
          }
          .file-lists {
            height: r(100);
            float: left;
            width: r(100);
            background: #f2f2f2;
            border-radius: r(4);
            overflow: hidden;
            margin-right: r(12);
            margin-bottom: r(12);
            img {
              width: 100%;
            }
          }
        }
      }
      p {
        font-size: r(14);
        color: #cccccc;
        line-height: r(22);
      }
      .submit {
        width: 100%;
        height: r(50);
        border-radius: r(50);
        background: #ccc;
        font-size: r(16);
        color: #ffffff;
        text-align: center;
        text-decoration: none;
        margin-top: r(10);
      }
      .active {
        background: -webkit-linear-gradient(right, #86d1fc, #4ea4f7);
        background: linear-gradient(left, #86d1fc, #4ea4f7);
      }
      .check-more-answer {
        text-align: center;
        margin-top: 16px;
        a {
          color: #6dbbfe;
          line-height: 22px;
          display: inline-block;
          border-bottom: 1px solid #6dbbfe;
        }
      }
    }
  }
}
</style>
